<html>
	<head>
	<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
	</script>
	</head>

<body>
	<button id="button">按钮</button>
	<div>
	<table id="table" class="mytable" border="2">
	</table>
	
	<div class="page">
		<div class="pre"> &lt </div>
		<div class="pageNum">1</div>
		<div class="next"> &gt </div>
	</div>
	</div>
</body>
<script>
	
	$("button").click(function(){
		var userid = '12313'
		var userInfo = {
			userId: '1102020001',
			userPassword: '10086'
		}
		var html = "<tr><th>编号</th><th>状态</th><th>书名</th></tr>"
        $.ajax({
            type: 'post',//get是获取数据，post是带数据的向服务器发送请求
            url: 'http://localhost:8989/user/test',
            dataType: 'json',
			data: JSON.stringify(userInfo),
			contentType: "application/json", 
            success: function (res) {
				console.log(res.data)
				for(var i = 0; i < res.data.length; i++) {
					html = html +  "<tr><td>" + res.data[i].bookId + "</td><td>" + res.data[i].bookStatus + "</td><td>" + res.data[i].bookWareId + "</td></tr>";
				}
				$("#table").html(html)
				
            },
            error: function (res) {
                alert("JSON数据获取失败，请联系管理员！");
            }
        });
	});

</script>

<style>
.mytable {
	width: 500px;
	border: 2px;
	text-align: center;
	border-collapse: collapse;
}

.mytable tr {
	width: 100px;
}

.page {
    margin-top: 0.2cm;
	margin-left: 3cm;
	width: 300px;
	position: relative;
}

.pre {
    width: 100px;
	float: left;
	cursor: pointer;
}

.pageNum {
	width: 100px;
	float: left;
}

.next {
	width: 100px;
	float: left;
	cursor: pointer;
}

	
</style>
<html>